<style>
    #onerepmax-div-colors div {
        display: inline;
        margin: 5px;
    }
</style>

<canvas id="onerepmax-canvas-chart" height="400" width="550"></canvas>

<div id="onerepmax-div-colors"></div>

<script type="text/javascript">
    var data        = getElementJSON("#onerepmax-chartdata",false);
    var unit        = getElementText("#onerepmax-unit",false);
    var colors      = {};
    var exercises   = {};
    var date        = [];
    var datasets    = [];
    var labels      = [];
    
    // Tuntematon yksikkö
    if (unit != "kg" && unit != "lb") {
        unit = "kg";
    }
    
    // Hae harjoitteiden data
    if (typeof data == "object") {
        for (var x in data) {
            var object = data[x];
            var name = object["exerciseid"]+"|";
            
            if (object["barbell_type"]) {
                name += object["barbell_type"];
            }
            
            if (!exercises.hasOwnProperty(name)) {
                exercises[name] = {};
            }
            
            var time = new Date(object["startdate"]).getTime();
            var weight = parseFloat(object["calculated_"+unit]);
            
            // Onko aikaleima jo otettu talteen
            if (date.indexOf(time) == -1) {
                date.push(time);
            }
            
            exercises[name][time] = weight;            
        }
        
        // Järjestä päivämäärät
        date = date.sort(function(a,b){
            return a-b;
        });
        
        // Muodosta data akseleille
        var color = start = 80;
        for (var name in exercises) {
            var colorStr = "rgba("+color+",120,120,1)";
            colors[name] = colorStr;
            
            var dataset = {
                "data":                 [],
                "strokeColor":          colorStr,
                "pointColor":           colorStr,
                "pointHighlightStroke": colorStr,
                "pointStrokeColor":     "#fff",
                "pointHighlightFill":   "#fff"              
            };
            
            for (var x in date) {
                var time = date[x];
                
                if (exercises[name].hasOwnProperty(time)) {
                    dataset["data"].push(exercises[name][time]);
                } else {
                    dataset["data"].push(null);
                }
                
                var isoDate = new Date(time).
                    toISOString().
                    slice(0,10);
                    
                if (labels.indexOf(isoDate) == -1) {
                    labels.push(isoDate);
                }
            }
            
            datasets.push(dataset);
            
            color += 40;
            if (color > 240) {
                start -= 10;
                if (start < 30) {
                    start = 80;
                }
                color = start;
            }
        }
    }
        
    // Muodosta chart
    var ctx = $("#onerepmax-canvas-chart").
        get(0).
        getContext("2d");
        
    var chart = new Chart(ctx).Line({
        datasets:   datasets,
        labels:     labels      
    },{
        animation:      false,
        datasetFill:    false
    });
    
    var $to = $("#onerepmax-div-colors");
    for (var name in colors) {
        var arr = name.split("|");
        var colorStr = colors[name];        
        
        var exercisetext = ExerciseControl.getExerciseText(arr[0]);
        if (arr[1]) {
            exercisetext += " ("+objGet(ExerciseControl.barbellTypes,arr[1],"")+")";
        }
        
        $("<div>").
            css("background-color",colorStr).
            html("&nbsp;&nbsp;&nbsp;&nbsp;").
            appendTo($to);
            
        $("<span>").
            text(exercisetext).
            appendTo($to);
            
        $("<br />").
            appendTo($to);
    }
</script>